<template>

  <div>
    <Scroll class="item-scroll">
      <li class="item" v-for="(item,index) in categoryList" 
          :key="index"
          @click="slideBarItemClick(item,index)"
          :class="{active:currentIndex==index}">
        {{item.title}}</li>
    </Scroll>
    
  </div>
</template>
<script>
import Scroll from '@/components/common/scroll/Scroll'
export default {
  name:"SlideBar",
  components:{
    Scroll,
  },
  data() {
    return {
      currentIndex:0,
    }
  },
  props:{
    categoryList:{
      type:Array,
      default:function(){
        return []
      }
    }
  },
  methods: {
    slideBarItemClick(item,index){
      //注意此时每个item有maitKey,请求数据时要用到
      // console.log("maitKey",item.maitKey);
      this.currentIndex=index;
      const obj={
        maitKey:item.maitKey,
        index
      }
      // console.log(obj);
      
      //发出事件让父组件监听，监听时请求数据
      this.$emit('slideBarItemClick',obj)
    }
  },
}
</script>
<style scoped>
.item-scroll{
  height: 100%;
  
}
.item{
  list-style: none;
  font-size: 14px;
  background-color: #ccc;
  padding: 15px;
  text-align: center;
}
.active{
  color: red;
}
</style>